<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="doctorPage">
			<h1>预约排名</h1>
			<div class="appointmentList">
				<el-table
				    :data="tableData"
				    style="width: 100%"
				    max-height="400">
				    <el-table-column
				      fixed
				      prop="appointmentTime"
				      label="预约时间"
				      width="150">
				    </el-table-column>
				    <el-table-column
				      prop="studentName"
				      label="姓名"
				      width="120">
				    </el-table-column>
				    <el-table-column
				      prop="gender"
				      label="性别"
				      width="120">
				    </el-table-column>
				    <el-table-column
				      prop="appointmentType"
				      label="病症"
				      width="120">
				    </el-table-column>
				    <el-table-column
				      prop="contactWay"
				      label="联系方式"
				      width="200">
				    </el-table-column>
				    <el-table-column
				      prop="operationDoctor"
				      label="接诊医生"
				      width="130">
				    </el-table-column>
					<el-table-column
					  prop="status"
					  label="预约状态"
					  width="100">
					  <template slot-scope='scope'>
					  		{{scope.row.status | getstatus(scope.row.status)}}
					  </template>
					</el-table-column>
				    <el-table-column
				      fixed="right"
				      label="操作"
				      width="200">
				      <template slot-scope="scope">
				        <el-button
						@click='disposeBtn(1, scope.row)'
				          type="text"
				          size="small">
				          接诊
				        </el-button>
						<el-button
						  @click='disposeBtn(3, scope.row)'
						  type="text"
						  size="small">
						  过期
						</el-button>
						<el-button
						  @click='disposeBtn(2, scope.row)'
						  type="text"
						  size="small">
						  完成
						</el-button>
				      </template>
				    </el-table-column>
				  </el-table>
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#doctorPage',
			data() {
			      return {
			        tableData: []
			      }
			    },
				mounted() {
					if(window.sessionStorage.getItem('islogin')){
						this.getAllInfo()
					}else{
						window.location = '../login.html'
						alert('给我登录！！！')
					}
				},
				 methods: {
				      deleteRow(index, rows) {
				        rows.splice(index, 1);
				      },
					  // 获取全部预约信息
					  async getAllInfo(){
						  const {data: res } = await axios.get('http://47.115.220.91:8787/doctorPages')
						  // console.log(res)
						  this.tableData = res.data
					  },
					  // 接诊按钮
					  async disposeBtn(n,row){
						  
						  const {data: res } = await axios.put('http://47.115.220.91:8787/doctorPages?uid='+row.uid+'&status='+n)
						  let doctorName = window.sessionStorage.getItem('doctorName')
						  const {data: res2 } = await axios.put('http://47.115.220.91:8787/studentPages/modifyType?uid='+ row.uid +'&doctorName='+ JSON.parse(doctorName))
						  let socket = new WebSocket('ws://47.115.220.91:8787/myWebSocket');
						  socket.addEventListener('open', function () {
						          socket.send('$$' + doctorName)
								  console.log('socket连接成功')
								  socket.send("maohe101")
								  socket.close()
						      });
						  this.getAllInfo()
					  },
				    },
					
					filters:{
						getstatus(value){
						    if(value === '0'){
								return '待开始'
							}else if(value === '1'){
								return '接诊中'
							}else if(value === '2'){
								return '已完成'
							}else{
								return '已错过'
							}
						},
					}
		})
	</script>
</html>
